iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Modern Web

React進階班,用typescript與jest製作自己的custom hooks庫系列 第 16

[Day 16] 使用複製文字功能吧useCopyToClipboard

  • 分享至 

  • xImage
  •  

我想要設定複製文字功能回傳兩個值,一個是複製是否完成,一個是複製方法的函數

複製文字有兩種方法

第一種,新型瀏覽器支援的複製方法

 await navigator.clipboard.writeText(text);

第二種,舊型的複製方法,有些瀏覽器不支援新型的

     const copyText = document.createElement("textarea");
        copyText.value = text;
        document.body.appendChild(copyText);
        copyText.select();
        document.execCommand("copy");
        document.body.removeChild(copyText);

知道的這兩種方法後就可以開始寫了

import { useState, useCallback } from "react";

const useCopyToClipboard = () => {
  const [isCopied, setIsCopied] = useState<boolean>(false);

  const copyToClipboard = useCallback(async (text: string) => {
    try {
			//判斷是否可以用新的方法
      if (!navigator?.clipboard) {
        console.warn(
          "Clipboard API not supported, falling back to execCommand"
        );
        const copyText = document.createElement("textarea");
        copyText.value = text;
        document.body.appendChild(copyText);
        copyText.select();
        document.execCommand("copy");
        document.body.removeChild(copyText);
      } else {
        await navigator.clipboard.writeText(text);
      }

      setIsCopied(true);

      // Reset after 3 seconds
      setTimeout(() => setIsCopied(false), 3000);
    } catch (error) {
      console.error("Failed to copy text: ", error);
      setIsCopied(false);
    }
  }, []);

  return [isCopied, copyToClipboard] as const;
};

export default useCopyToClipboard;

大功告成!


上一篇
[Day 15] 今天換個方式測試useOutsideClick吧
下一篇
[Day 17] useCopyToClip測試
系列文
React進階班,用typescript與jest製作自己的custom hooks庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言